import {Component,HostBinding,animate,style,transition,state,trigger} from '@angular/core';
import {ActivityService} from "../../service/activity.service";
import {Activity} from "../../entity/activity";
import {ToastOptions, ToastData, ToastyService} from "ng2-toasty";


@Component({
    moduleId: module.id,
    selector: 'my-back-hdgl',
    template: `<div class="row">
  <div class="col-sm-1"></div>
  <div class="col-sm-10" style="min-width: 50%;margin-top: -50px;">
    <div class="panel panel-info" *ngFor="let activity of activities">
      <div class="panel-body">
        <div class="list-group article">
          <a [routerLink]="['/activity',activity.id]" class="list-group-item-action">
            <h3 class="list-group-item-heading text-primary">{{activity.title}}</h3>
            <small class="text-muted">{{activity.theme}}</small>
          </a>
          <div class="btn-group btn-group-xs" role="group" style="padding-left: 30px">
            <button (click)="deleteActivity(activity.id)" type="button" class="btn btn-danger">删除</button>
          </div>
        </div>
      </div>
    </div>
    <h1 *ngIf="isEmpty">暂无相关活动</h1>
    <ngb-pagination *ngIf="!isEmpty" (pageChange)="pageChange($event)" [collectionSize]="120" [(page)]="page" [maxSize]="5"
                    [rotate]="true" [ellipses]="false" [boundaryLinks]="true"></ngb-pagination>
  </div>
  <div class="col-sm-1"></div>
</div>
`,
  animations: [
    trigger('routeAnimation', [
      state('*',
        style({
          opacity: 1,
          transform: 'translateX(0)'
        })
      ),
      transition(':enter', [
        style({
          opacity: 0,
          transform: 'translateX(100%)'
        }),
        animate('0.6s ease-in')
      ]),
      transition(':leave', [
        animate('0.6s ease-out', style({
          opacity: 0,
          transform: 'translateY(100%)'
        }))
      ])
    ])
  ]
})

export class BackItemActivityManageComponent{

  @HostBinding('@routeAnimation') get routeAnimation() {
    return true;
  }

  @HostBinding('style.display') get display() {
    return 'block';
  }

  @HostBinding('style.position') get position() {
    return 'inherit';
  }

  activities: Activity[];
  isEmpty = false;
  page = 1;

  constructor(private activityService:ActivityService, private toastyService:ToastyService){}

  ngOnInit() {
    this.activityService.getActivitiesByUserId(this.page).subscribe((activities) => {
      this.activities = activities;
      if (activities.length === 0) {
        this.isEmpty = true;
      }
    });
  }

  pageChange($event:any) {
    this.activityService.getActivitiesByUserId($event).subscribe((activities) => this.activities = activities);
  }

  deleteActivity(id:string) {
    this.activityService.delete(id).subscribe((count) => {
      if (count === 1) {
        const toastOptions:ToastOptions = {
          title: "提示信息",
          msg: "删除成功！",
          showClose: true,
          timeout: 1200,
          theme: 'bootstrap',
          onAdd: (toast:ToastData) => {},
          onRemove: (toast:ToastData) => {}
        };
        this.toastyService.success(toastOptions);
        this.activities = this.activities.filter((activity)=>{
          return activity.id !== id;
        })
      }
    });
  }
}
